<template>
  <div>
    <div v-for="(cat1, index) in cat1List" :key="cat1.id">
      <div class="i_t mar_10">
        <span class="floor_num">{{ index + 1 }}F</span>
        <!-- 一级分类 -->
        <span class="fl">{{ cat1.name }}</span>
        <!-- 二级分类 -->
        <span class="i_mores fr">
          <a href="#" v-for="cat2 in cat1.children" :key="cat2.id">{{ cat2.name }}&nbsp;&nbsp;&nbsp;</a>
        </span>
      </div>
      <div class="content">
        <div class="fresh_left">
          <div class="fre_ban">
            <div id="imgPlay1">
              <ul class="imgs" id="actor1">
                <li>
                  <a href="#">
                    <img :src="require('@/assets/images/fre_r.jpg')" width="211" height="286" />
                  </a>
                </li>
              </ul>
              <div class="prevf">上一张</div>
              <div class="nextf">下一张</div>
            </div>
          </div>
          <!-- 三级分类 -->
          <div class="fresh_txt">
            <div class="fresh_txt_c">
              <a href="#" v-for="cat2 in cat1.children" :key="cat2.id">{{ cat2.name }}</a>
            </div>
          </div>
        </div>
        <div class="fresh_mid">
          <ul>
            <li v-for="product in cat1.products" :key="product.id">
              <div class="name"><a href="#">{{ product.name }}</a></div>
              <div class="price">
                <font>￥<span>{{ product.price }}</span></font> &nbsp;
              </div>
              <div class="img">
                <a href="#" @click.prevent="toProductDetail(product.id)">
                  <img :src="'http://192.168.144.183:9090/easybuyImages/' + product.fileName" width="185"
                    height="155" />
                </a>
              </div>
            </li>
            <h1 v-if="!products || products === 0" style="color: #ff4e00;">暂无商品</h1>
          </ul>
        </div>
        <div class="fresh_right">
          <ul>
            <li>
              <a href="#"><img :src="require('@/assets/images/fre_b1.jpg')" width="260" height="220" /></a>
            </li>
            <li>
              <a href="#"><img :src="require('@/assets/images/fre_b2.jpg')" width="260" height="220" /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FloorProducts',
  data() {
    return {
      treeData: [],
      cat1List: [],
      pageInfo: {},
      productList: [],
    }
  },
  methods: {
    // 获取一级数据
    getRootCategroies() {
      this.$axios.get('/selectRootCategories').then(async rs => {
        if (rs.data.code === 5200) {
          this.treeData = rs.data.allCategoryWithChild
          this.cat1List = this.treeData

          for (let cat1 of this.cat1List) {
            const products = await this.getProductList(1, 6, cat1.id);
            this.$set(cat1, 'products', products);
          }
        }
      })
    }
    , getProductList(pageNum, pageSize, cat1Id) {
      const data = {
        pageNum: pageNum,
        pageSize: pageSize,
        categoryLevel1Id: cat1Id
      }
      return this.$axios({
        url: '/selectProductByPage',
        method: 'post',
        data: data,
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(rs => {
        if (rs.data.code === 5200) {
          console.log("商品返回数据" + rs.data.pageInfo.list);
          return rs.data.pageInfo.list;
        } else {
          return [];
        }
      });
    }
    , toProductDetail(id) {
      // console.log("商品Id为" + id)
      this.$router.push({ path: '/productDetail', query: { id: id } })
    }
  }, mounted() {
    this.getRootCategroies()
  }
};
</script>

<style></style>